<template>
  <div
    class="min-h-screen animate__animated animate__fadeIn duration-700 dark:bg-zinc-900"
  >
    <main class="flex flex-col md:flex-row w-full mx-auto dark:bg-zinc-900">
      <Header
        @handleCatalogClick="handleCatalogClick"
        @onGetCatalog="onGetCatalog"
        :id="id"
        :toc="toc"
      ></Header>
      <!-- Sidebar -->
      <aside
        class="hidden md:block md:w-1/4 lg:w-1/5 dark:bg-zinc-900 shadow-lg rounded-sm sticky top-0 h-screen p-2"
      >
        <div class="mt-2 flex cursor-pointer">
          <My-svg-icon
            class="w-1.5 h-1.5 dark:text-zinc-100"
            name="back"
          ></My-svg-icon>
          <span @click="$router.back()" class="text-sm dark:text-zinc-100"
            >返回</span
          >
        </div>
        <h3 class="text-xl font-semibold m-2 dark:text-zinc-100 text-zinc-800">
          目录
        </h3>
        <MdCatalog
          class="text-sm font-semibold dark:text-zinc-100 text-zinc-800 w-full rounded-sm dark:bg-zinc-900"
          :editorId="id"
          :onClick="handleCatalogClick"
          :onGetCatalog="onGetCatalog"
        />
      </aside>
      <!-- Article Content -->
      <article
        ref="scrollElement"
        class="md:w-3/4 lg:w-4/5 rounded-sm shadow p-1 overflow-scroll dark:bg-zinc-900 md-editor-preview"
      >
        <h1
          class="text-2xl sm:text-xl md:text-3xl lg:text-4xl dark:text-zinc-100 text-zinc-800 mb-4"
        >
          {{
            usecardListStore
              .getCurrentArticle($route.params.id)
              .title.replace('.md', '')
          }}
        </h1>
        <p
          class="text-xl sm:text-md md:text-xl lg:text-xl dark:text-zinc-100 text-zinc-800 mb-4"
        >
          作者:LYC | 发布日期 :
          {{
            useDateFormat(
              new Date(
                usecardListStore.getCurrentArticle($route.params.id).createdAt
              ),
              'YYYY-MM-DD HH:mm:ss'
            )
          }}
        </p>
        <div class="text-zinc-700 leading-relaxed space-y-4">
          <div class="prose max-w-none">
            <MdPreview
              class="rounded-sm dark:bg-zinc-900"
              style="overflow-x: scroll"
              :onGetCatalog="onGetCatalog"
              :codeFoldable="false"
              :autoFoldThreshold="9999999"
              previewTheme="vuepress"
              :modelValue="
                usecardListStore.getCurrentArticle($route.params.id).content
              "
              :editorId="id"
              :theme="useThemeStore.currentTheme.theme"
            />
          </div>
        </div>
      </article>
    </main>
    <My-backTop></My-backTop>
    <Footer />
  </div>
</template>
<script setup>
import Header from '../../../../Mobile/CardList/details/header/index.vue'
import Footer from '../../../../components/footer/index.vue'
import { MdPreview, MdCatalog } from 'md-editor-v3'
import { useRoute } from 'vue-router'
import { useDateFormat } from '@vueuse/core'
import { ref, onMounted } from 'vue'
import themeStore from '@/store/theme/index.js'
const useThemeStore = themeStore()
import cardListStore from '@/store/CardList/index.js'
const id = ref('detail-id-desktop')
const scrollElement = ref(null)
const usecardListStore = cardListStore()
// 获取目录点击后的标题位置
const handleCatalogClick = (e, tocItem) => {
  e.preventDefault()
  const titleId = tocItem.text
  // 获取所有目录链接，清除之前的高亮
  const links = document.querySelectorAll('.md-editor-catalog-link')

  links.forEach((link) => {
    link.classList.remove('md-editor-catalog-active')
    const spanElement = link.querySelectorAll('span')[0]
    spanElement.style.color = ''
  })
  // 为当前点击的目标添加高亮类
  const currentActive = e.target // 点击的元素
  currentActive.style.color = '#73d13d'
  // 滚动到目标标题
  const targetElement = document.getElementById(titleId)
  if (targetElement) {
    targetElement.scrollIntoView({ behavior: 'smooth' })
  }
}
const toc = ref([])
// 初始化获取目录和标题的位置
const onGetCatalog = (toc) => {
  // 遍历目录并获取标题的位置
  toc.value = toc.value
}
//标题高亮
onMounted(() => {
  scrollElement.value = document.querySelector('.md-editor-preview')
})
//渲染md
const currentRoute = useRoute()
const { id: articleId } = currentRoute.params
const renderValue = ref('')

const filterRenderArticleFn = (articleId) => {
  const result = usecardListStore.MbData.find(
    (item) => item.id == Number(articleId)
  )
  console.log(result)
}
filterRenderArticleFn(articleId)
//获取store中的数据
</script>

<style scoped>
@media (max-width: 768px) {
  /* 侧边栏处理 */
  aside {
    display: none !important;
  }
  /* 主内容全屏宽度 */
  main article {
    width: 100%;
  }
}
</style>
